<template>
	<div ref="dom" class="charts chart-line"></div>
</template>
<script>
import echarts from './index'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
	name: 'LineChart',
	data() {
		return {
			dom: null
		}
	},
	methods: {
		resize() {
			this.dom.resize()
		},
		init(xAxis, series, title) {
			const option = {
				title: {
					text: title,
					textStyle: {
						color: '#333333',
						fontWeight: 600,
						fontSize: '16px'
					},
					left: '0'
				},
				grid: {
					left: '5%',
					right: '5%',
					bottom: '10%'
				},
				xAxis: {
					type: 'category',
					splitLine: { show: false },
					data: xAxis
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
					trigger: 'axis'
				},
				series: [
					{
						data: series,
						type: 'line'
					}
				]
			}
			this.dom = echarts.init(this.$refs.dom, 'tdTheme')
			this.dom.setOption(option)
			on(window, 'resize', this.resize)
		}
	},
	beforeDestroy() {
		off(window, 'resize', this.resize)
	}
}
</script>
